<template>
    <div class="deviceType">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">大宗物资库存监控</span>
        </div>
        <div class="content">
            <div class="statistics">
                <!-- <div class="statistics_title">
                    <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                    <span>任务完成率</span>
                </div> -->
                <lineChart :data="chartData.data"></lineChart>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import lineChart from './lineChart.vue';
const chartData = reactive({
    data: [
        { date: '10/01', value: 50 },
        { date: '10/02', value: 60 },
        { date: '10/03', value: 70 },
        { date: '10/04', value: 30 },
        { date: '10/05', value: 40 },
        { date: '10/06', value: 80 },
        { date: '10/07', value: 60 },
    ] as any,
    data2: [
        { value: '10', name: '班组A' },
        { value: "25", name: '班组B' },
        { value: "33", name: '班组C' },
        { value: "28", name: '班组D' },
    ]
})
</script>

<style lang="scss" scoped>
.deviceType {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    padding-left: vh(28);
    padding-right: vh(28);
    background: url(@/assets/images/dailyMaintenance/l-bg-01.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(665);
    width: vw(422);
    height: vh(283);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        margin-top: vh(30);

        .statistics {


            .inspected {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #00B1CD;
                margin-top: vh(14);
            }
        }
    }
}
</style>